<template>
    <div v-if="filterList.length > 0" class="filter-container">
        <el-row :gutter="gutter">
            <el-col v-for="(item, index) in filterList" :span="span" :key="item.name" :style="{marginBottom: gutter+'px'}" v-show="index < 5 || isOpen">
                <el-input v-if="!item.type" v-model="listQuery[item.name]" :placeholder="item.tips" class="filter-item" @keyup.enter.native="handleFilter" />
                <el-date-picker v-if="item.type === 'date'" v-model="listQuery[item.name]" type="date" :placeholder="item.tips" value-format="yyyy-MM-dd"/>
                <el-select v-if="item.type === 'select'" v-model="listQuery[item.name]" :placeholder="item.tips" filterable collapse-tags>
                    <el-option v-for="child in item.options" :key="child[item.key||'value']" :label="child[item.label||(language === 'en' ? 'labelEn' : 'label')]" :value="child[item.value||'value']" />
                </el-select>
            </el-col>
            <el-col :span="span" :style="{marginBottom: gutter+'px'}">
                <el-row :gutter="8">
                    <el-col :span="8"><el-button class="filter-btn filter-btn-reset" type="primary" @click="handleFilterReset"><i class="el-icon-refresh"/></el-button></el-col>
                    <el-col :span="8"><el-button class="filter-btn" type="primary" @click="handleFilter"><i class="el-icon-search" /></el-button></el-col>
                    <el-col :span="8" v-if="filterList.length > 5"><el-button class="filter-btn" :class="{openBtn:isOpen}" type="text" @click="handleOpen">{{ isOpen ? '收缩' : '展开' }}<i class="el-icon-caret-bottom"></i></el-button></el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

/**
 * @desc 列表头部筛选内容
 * filterList - 主要属性：{type: 'date|select|默认不填input', name: '字段名', tips: '提示语', options: 'select选项组', key: 'select默认key', label: 'select默认label'}
 */
export default {
    name: 'ListFilter',
    props: {
        gutter: Number,
        span: Number,
        filterList: Array,
        listQuery: Object
    },
    data: function() {
        return {
            isOpen: false
        };
    },
    computed: {
        ...mapGetters([
            'language'
        ])
    },
    methods: {
        handleOpen() {
            this.isOpen = !this.isOpen;
        },
        handleFilterReset() {
            this.$emit('refreshList', { page: 1, limit: this.listQuery.limit, reset: true })
        },
        handleFilter() {
            this.$emit('refreshList', { page: 1, limit: this.listQuery.limit })
        }
    }
};
</script>

<style lang="scss" scoped>
.filter-btn{
    .el-icon-caret-bottom{
        transition: .3s;
    }
    &.openBtn{
        .el-icon-caret-bottom{
            transform: rotate(180deg);
        }
    }
}
</style>
